<template>
  <div id="swiper">
    <!-- 添加模态框 -->
    <Modal title="添加幻灯片" v-model="addMotal" width="380px" @on-ok="addSwiper">
      <p class="type-item">
        <span>信息:</span>
        <Input v-model="info" placeholder="请输入展示信息" style="width: 240px"/>
      </p>
      <p class="type-item">
        <span>外链:</span>
        <Input v-model="http" placeholder="请输入链接地址" style="width: 240px"/>
      </p>
      <p class="type-item">
        <span></span>
        <Upload
          action="//jsonplaceholder.typicode.com/posts/"
          style="display:inline-block;width:240px;border:0"
          :before-upload="startUp"
          type="drag"
        >
          <div style="padding: 20px 0;position:relative">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或拖拽上传图片</p>
            <div id="img-see" v-if="file">
              <img v-show="file" :src="global.serviceUrl + file" title="点击取消" @click.stop="cancel">
            </div>
          </div>
        </Upload>
      </p>
    </Modal>

    <div class="module">
      <div id="option">
        <Button type="primary" icon="ios-add" @click="addMotal = true">添加</Button>
      </div>
      <Table stripe :columns="headers" :loading="loading" :data="datas">
        <template slot-scope="{ row, index }" slot="src">
          <img class="src-item" :src="global.serviceUrl + row.src" alt>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="error" size="small" icon="ios-trash-outline" @click="deleteSwiper(row.id)"></Button>
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import { uploads, addSwipers, getSwiper, deleteSwipers } from "@/config/api";
export default {
  data() {
    return {
      loading: true, //表格加载状态
      info: "", //输出的信息
      http: "", //外链地址
      file: "", //图片路径
      addMotal: false,
      headers: [
        {
          title: "编号",
          width: 80,
          fixed: "left",
          key: "id"
        },
        {
          title: "外链",
          key: "http"
        },
        {
          title: "图片",
          width: 100,
          slot: "src"
        },
        {
          title: "信息",
          key: "info"
        },
        {
          title: "操作",
          fixed: "right",
          width: 150,
          slot: "action"
        }
      ],
      datas: []
    };
  },
  methods: {
    //上传图片
    startUp(file) {
      const $this = this;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        uploads(this.result, "base")
          .then(result => {
            if (result.data) {
              $this.$Message.success("上传成功！");
              $this.file = result.data;
            }
          })
          .catch(error => {
            $this.loadingImg = false; //关闭加载
            $this.$Message.error("上传失败！");
          });
      };
      return false;
    },
    cancel() {
      this.file = "";
    },
    addSwiper() {
      addSwipers(this.file, this.http, this.info)
        .then(result => {
          if (result.data.affectedRows == 1) {
            this.$Message.success("添加成功！");
            this.getAllSwiper();
            this.file = ""; //初始化
            this.info = "";
            this.http = "";
          } else {
            this.$Message.error("添加失败！");
          }
        })
        .catch(err => {
          this.$Message.error("添加失败！");
          throw err;
        });
    },
    deleteSwiper(ids) {
      deleteSwipers(ids)
        .then(result => {
          if (result.data.affectedRows == 1) {
            this.$Message.success("删除成功！");
            this.getAllSwiper();
          } else {
            this.$Message.error("删除失败！");
          }
        })
        .catch(err => {
          this.$Message.error("删除失败！");
          throw err;
        });
    },
    getAllSwiper() {
      getSwiper()
        .then(result => {
          this.datas = result.data;
          this.loading = false; //关闭加载
        })
        .catch(err => {
          throw err;
        });
    }
  },
  mounted() {
    this.getAllSwiper();
  }
};
</script>
<style scoped>
#swiper {
  height: 100%;
  display: flex;
  flex-direction: columns;
}
.module {
  flex: 1;
  border-radius: 2px;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
}
#option {
  padding-bottom: 20px;
  text-align: right;
}
.type-item {
  padding: 10px 0;
}
.type-item > span {
  display: inline-block;
  width: 60px;
  text-align: right;
}
#img-see {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
#img-see > img {
  width: 100%;
  height: 100%;
}
.src-item {
  width: 50px;
  height: 40px;
  margin: 5px 0;
}
</style>


